<template>
    <div>
        <div style="display: flex;">
            <el-card v-for="(knowledgeSet, index) in knowledgeSetList" :key="index" class="ai-knowedge-set"
                shadow="hover">
                <h4><span>{{ knowledgeSet.name }}</span>
                </h4>
                <p>{{ knowledgeSet.description }}</p>
                <template #footer>
                    <div class="ai-knowedge-set-actions">
                        <el-icon>
                            <Setting @click="editKnowledgeSet(knowledgeSet)" />
                        </el-icon>
                        <el-icon>
                            <Delete @click="deleteKnowledgeSet(knowledgeSet)" />
                        </el-icon>
                        <el-icon>
                            <Link @click="openKnowledgeSet(knowledgeSet)" />
                        </el-icon>
                    </div>
                </template>

            </el-card>
            <el-card class="ai-knowedge-set" @click="createKnowledgeSet" shadow="hover">
                <div style="line-height: 80px;">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    <span>创建应用</span>
                </div>
            </el-card>
        </div>
        <el-dialog :title="formData.id ? '编辑知识集合' : '创建知识集合'" v-model="isDialogVisible">
            <el-form ref="formRef" :rules="formRules" :model="formData" label-width="120px">
                <el-form-item label="知识集名称" prop="name">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="知识集描述">
                    <el-input v-model="formData.description"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" style="text-align: center;">
                <el-button @click="isDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script setup lang="js">
import { onMounted, ref } from 'vue';
import ragKnowledgeSetApi from '@/api/ragKnowledgeSetApi';
import { ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
const knowledgeSetList = ref([])
const router = useRouter();
const createKnowledgeSet = () => {
    openDialog();
};

const editKnowledgeSet = (item) => {
    formData.value = { ...item };
    openDialog();
};

const fetchKnowledgeSetList = () => {
    ragKnowledgeSetApi.list().then((res) => {
        knowledgeSetList.value = res.data;
    });
};

const deleteKnowledgeSet = (item) => {
    ElMessageBox.confirm(
        `确定删除知识集【${item.name}】吗？`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        ragKnowledgeSetApi.delete(item.id).then((res) => {
            fetchKnowledgeSetList();
        });
    }).catch(() => {
        // 取消删除
    });
};

const openKnowledgeSet = (item) => {
    router.push({
        name: 'KnowledgeSetDetail',
        params: {
            id: item.id
        }
    });
};

// 新增编辑模态框
const isDialogVisible = ref(false);
const formRef = ref(null);
const formData = ref({
    name: '',
    description: ''
});
const formRules = ref({
    name: [{ required: true, message: '请输入知识集名称', trigger: 'blur' }]
});
function submitForm() {
    formRef.value.validate((valid) => {
        if (valid) {
            let promise = null;
            if (formData.value.id) {
                promise = ragKnowledgeSetApi.update(formData.value.id, formData.value);
            } else {
                promise = ragKnowledgeSetApi.create(formData.value);
            }
            promise.then((res) => {
                isDialogVisible.value = false;
                resetForm();
                fetchKnowledgeSetList();
            });
        } else {
            return false;
        }
    });
}
function openDialog() {
    isDialogVisible.value = true;
}
function resetForm() {
    formData.value = {
        name: '',
        description: ''
    };
}

onMounted(() => {
    fetchKnowledgeSetList();
});

</script>
<style lang="scss" scoped>
.ai-knowedge-set {
    width: 300px;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 10px;
    margin: 20px;

    :deep(.el-card__body) {
        padding: 0px;
        height: 80px;
    }

    :deep(.el-card__footer) {
        padding: 10px 0px 0px 0px;

        .el-icon {
            cursor: pointer;
            margin-right: 15px;
            font-size: 18px;
        }
    }

    h4 {
        font-size: 16px;
        margin: 2px 0px;
    }

    p {
        font-size: 14px;
        padding: 0;
        margin: 0;
    }

    &:last-child {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        &:hover {}
    }

}
</style>